<template>
	<div class="wrapper" style="text-align:center;">
		<el-carousel v-bind="$attrs">
			<el-carousel-item v-for="(item,index) in imgList" :key="index">
				<el-image fit="contain" class="swiper-img" v-bind:src="item" style="width: 100%; height: 100%" />
			</el-carousel-item>
		</el-carousel>
	</div>
</template>
<script>
	/**
		* 个人中心的展示轮播图
		*/
	export default {
		name: 'imgswiper',
		inheritAttrs: false,
		props: {
			list: Array,
			imgKey: {
				default: ''
			}
		},
		computed: {
			showSwiper() {
				return this.list.length
			},
			imgList() {
				try {
					if (this.imgKey) {
						return this.list.map(i => i[this.imgKey]);
					} else {
						return this.list.map(i => i);
					}
				} catch (error) {
					return [];
				}
			}
		}
	}
</script>

<style scoped>
	.wrapper {
		overflow: hidden;
		width: 640px;
		height: 480px;
		background: #f0f0f0;
		margin: 0 auto;
	}

	.swiper-img {
		width: 100%;
		height: auto;
	}

	.wrapper /deep/ .el-carousel__container {
		height: 480px;
	}

	.wrapper /deep/ .el-carousel__indicators {
		height: 15%;
	}

	.wrapper>>>.el-carousel__arrow {
		width: 60px;
		height: 98px;
		background: #000;
		opacity: 0.2;
		border-radius: 0px;
		top: calc(50%);
		top: -moz-calc(50%);
		top: -webkit-calc(50%);
	}

	.wrapper>>>.el-carousel__arrow i {
		font-size: 24px;
	}

	.wrapper>>>.el-carousel__indicators {
		bottom: 10px;
		display: flex;
	}

	.swiper-img {
		height: 100%;
		width: 100%;
	}
</style>